<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-11-29 16:36:58
 * @LastEditors: Andy
 * @LastEditTime: 2023-01-16 20:41:49
-->
<template>
  <x-dialog
    :title="title"
    :show.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    width="40%"
    @onCancel="handleClose"
    @onSubmit="handleSubmit"
  >
    <el-form
      :model="params"
      class="demo-form-inline"
      ref="params"
      :rules="rules"
      label-position="top"
      label-width="auto"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('system.tenant.transferAccount')">
            <!-- <el-input v-model="params.transferAccount" :placeholder="$t('system.tenant.accountTransferPlaceholder')"></el-input> -->
            <template #label>
              <em class="required-icon"> * </em>
              <span>{{ $t('system.tenant.transferAccount') }}</span>
            </template>
            <x-page-transfer
              ref="userTransfer"
              :from-data="tableData"
              :to-data="params.roleIds"
              :title="['用户列表', '已选用户']"
              :attrOption="attrOption"
              :paginationData="pagination"
              @on-change="handleTableChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('system.tenant.remark')" prop="remark">
            <el-input
              v-model="params.remark"
              type="textarea"
              :rows="3"
              :placeholder="$t('system.tenant.remark')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </x-dialog>
</template>
<script>
  // import {} from '@/common/mixins'
  import { cloneDeep, throttle, TableListMixin } from '@package/utils'
  import { listUrl } from '../api/index'

  export default {
    mixins: [TableListMixin],
    data() {
      return {
        visible: false,
        disableMixinCreated: true,
        listUrl,
        title: this.$t('system.tenant.accountTransfer'),
        params: {
          remark: '',
          transferAccount: ''
        },
        attrOption: {
          label: 'username',
          value: 'id'
        },
        rules: {
          transferAccount: [
            { required: true, message: this.$t('system.tenant.accountTransferPlaceholder'), trigger: 'blur' },
            { min: 1, max: 100, trigger: 'blur' }
          ],
          remark: [
            { required: true, message: this.$t('system.tenant.remarkPlaceholder'), trigger: 'blur' },
            { min: 1, max: 200, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleOpen(info) {
        this.visible = true
        this.params = Object.assign(this.params, cloneDeep(info))
        this.otherParam = {
          tenantId: this.params?.id ?? ''
        }
        this.loadData()
      },
      handleClose() {
        this.$refs.params.resetFields()
        this.visible = false
      },
      handleSubmit: throttle(function () {
        this.$message.warning('功能暂未开通')
        this.$refs.params.validate(async (valid) => {
          if (valid) {
            // const param = {
            //   ...this.params,
            //   password: md5(this.loginForm.password)
            // }
            // const { code, msg } = await apiPostAddUserBase(param)
            // if (code === EnumApiCode.Success) {
            //   this.$refs['params'].resetFields()
            //   this.$message.success(this.$t('userConfig.newSuccess'))
            //   this.$emit('handleSuccess')
            //   this.visible = false
            // } else {
            //   this.$message.error(msg)
            // }
          } else {
            return false
          }
        })
      }, 1000)
    }
  }
</script>
<style lang="scss" scoped>
  .required-icon {
    margin-right: 4px;
    color: #f56c6c;
  }
</style>
